<!--
 * @Author: licongwei
 * @Date: 2022-03-16 17:04:25
 * @Description:超市对接数据量
-->
<template>
  <com-box :title="title">
    <template v-slot>
      <div class="box">
        <ul class="list">
          <li class="item" v-for="(item, index) of data" :key="index">
            <img :src="item.image" alt="" />
            <p class="name">{{ item.name }}</p>
            <number-scroll
              :number="item.value"
              :color="'#ffd066'"
              :fontSize="22"
            ></number-scroll>
            <span class="unit">{{ item.unit }}</span>
          </li>
        </ul>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
import numberScroll from '@/components/numberScroll/numberScroll.vue'
interface IDataItem {
  name: string
  unit: string
  img: string
  value: number
}
interface IState {
  title: string
  data: IDataItem[]
  getData: () => void
}
export default defineComponent({
  name: 'mdslqk',
  components: {
    comBox,
    numberScroll
  },
  setup() {
    const state: IState = reactive({
      title: '',
      data: [],
      getData: () => {
        httpRequest
          .get({ url: 'M3P1Csdjsjl' })
          .then((res) => {
            state.title = res.title
            state.data = res.data.map((item: any) => ({
              ...item,
              image: item.img.slice(item.img.indexOf('/images'))
            }))
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    state.getData()
    return {
      ...toRefs(state)
    }
  }
})
</script>
<style lang="less" scoped>
.box {
  padding: 15px 1px 4px 4px;
  height: 100%;
  ul.list {
    height: 100%;
    display: flex;
    flex-direction: column;
    li.item {
      flex: 1;
      color: #b3f2ff;
      display: flex;
      align-items: center;
      margin: 2px 0;
      background-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(61, 153, 221, 0.3) 50%,
        transparent 100%
      );
      img {
        margin: 0 20px 0 15px;
      }
      .name {
        color: #01fff0;
        font-size: 18px;
        margin-right: auto;
        font-weight: 700;
      }
      .unit {
        font-size: 22px;
        font-family: 'AliHYAiHei';
        margin-right: 40px;
        color: #ffd066;
      }
    }
  }
}
</style>
